<template>
  <div class="app-container">
    <i-form-view ref="handlerForm" />

    <el-timeline>
      <el-timeline-item v-for="(comment, index) in processFromData.comments" :key="index" :timestamp="comment.time" placement="top">
        <el-card>
          <h4>{{ comment.fullMessage }}</h4>
          <p>{{ $t('processTask.operator') }} —— {{ comment.userId }}</p>
        </el-card>
      </el-timeline-item>
    </el-timeline>
  </div>
</template>
<script>
import { processInstanceDetail } from '@/api/flowable'
import IFormView from '@/components/Flowable/IFormView'
export default {
  name: 'HistoryDetail',
  components: {
    IFormView,
  },
  data() {
    return {
      taskForm: {
        description: '',
      },
      taskId: null,
      formData: {},
      processFromData: {},
    }
  },
  created() {
    this.processInstanceId = this.$route.query.id
    this.$nextTick(() => {
      processInstanceDetail(this.processInstanceId).then((res) => {
        if (res.code == '200') {
          this.processFromData = res.data
          this.$refs.handlerForm.init(this.processFromData)
        }
      })
    })
  },
  methods: {},
}
</script>

<style>
.footBtn {
  text-align: right;
  padding-bottom: 10px;
}
</style>
